<template>
    <div class="search-box">
      <el-form :inline="true" ref="ruleForm" :model="state.formInline" class="demo-form-inline">
        <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
          <!-- 下拉选择框 -->
          <el-select v-if="item.type == 'select'" v-model="state.formInline[item.param]" :multiple="item.multiple" :collapse-tags="item.collapse" placeholder="请选择" clearable>
            <el-option v-for="(item2, index2) in item.selectOptions" :key="index2" :label="item2.text" :value="item2.value"></el-option>
          </el-select>
          <!-- 下拉选择框end -->
          <!-- 输入框 -->
          <el-input v-if="item.type == 'input'" v-model="state.formInline[item.param]" size="default" placeholder="请输入" clearable></el-input>
          <!-- 输入框 -->
          <!-- 日期范围选择框 -->
          <el-date-picker v-if="
              item.type == 'daterange' ||
              item.type == 'datetimerange' ||
              item.type == 'date' ||
              item.type == 'datetime'
            " v-model="state.formInline[item.param]" :value-format="item.valueFormat || 'YYYY-MM-DD'" :format="item.format || 'YYYY-MM-DD'" clearable :type="item.type || ''" :range-separator="item.rangeSeparator || '至'" :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" placeholder="请选择" size="default">
          </el-date-picker>
          <!-- 日期范围选择框end -->
          <!-- 级联选择器 -->
          <el-cascader v-if="item.type == 'cascader'" v-model="state.formInline[item.param]" size="default" :options="item.options" :props="item.props" clearable></el-cascader>
          <!-- 级联选择器end style="width: 10rem;position: absolute;right:10px;"-->
        </el-form-item>
        <slot name="formItem"></slot>
  
        <el-form-item>
          <el-button type="primary" size="default" @click="onSubmit">
            <el-icon color="#fff" style="margin-right: 5px;">
              <Search />
            </el-icon>
            查询
          </el-button>
          <el-button type="" size="default" @click="resetForm('ruleForm')">
            <el-icon style="margin-right: 5px;">
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
  
        <!-- 可用于显示其他按钮 -->
        <slot name="formButton"></slot>
      </el-form>
    </div>
  </template>
  
  <script setup lang="ts">
  import {
    reactive,
    onMounted,
    toRefs,
    getCurrentInstance,
    watch,
    defineExpose,
  } from "vue";
  import { useRouter, useRoute } from "vue-router";
  const emit = defineEmits(["search"]);
  const props = defineProps({
    emitSearch: false,
    emitSearchSpecial: {
      // 完整率是否立即执行搜索
      type: Boolean,
      default: false,
    },
    formItemList: {
      type: Array,
      default() {
        return [
          {
            label: "下拉框",
            type: "select",
            selectOptions: [{ text: 111, value: 111 }],
            param: "company",
            defaultSelect: "222", // 下拉框默认选中项
            multiple: false,
          },
          {
            label: "输入框",
            type: "input",
            param: "name",
          },
          {
            label: "日期范围",
            type: "daterange",
            param: "createtime",
          },
          {
            label: "级联选择器",
            type: "cascader",
            param: "cascader",
            options: [],
            props: { multiple: false },
          },
        ];
      },
    },
  });
  const state = reactive({
    formItemList: props.formItemList,
    formInline: {},
  });
  // 获取当前路由
  const route = useRoute();
  // 获取路由实例
  const router = useRouter();
  
  //监听搜索条件数据
  watch(
    () => props.formItemList, //route
    (newVal, oldVal) => {
      for (const obj of props.formItemList) {
        state.formInline[obj.param] = obj.defaultSelect ? obj.defaultSelect : "";
      }
      // if (props.emitSearch) {
      //   emit("search", state.formInline);
      // }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  //监听是否立即搜索
  watch(
    () => props.emitSearch, //route
    (newVal, oldVal) => {
      console.log("yjyjyjy", state.formInline);
      if (!props.emitSearchSpecial) {
        //为了区分周跳比等
        emit("search", state.formInline);
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  
  onMounted(() => {});
  const onSubmit = () => {
    emit("search", state.formInline);
  };
  const { proxy } = getCurrentInstance();
  const resetForm = (formName) => {
    proxy.$refs[formName].resetFields();
    //   let formInlineNew = {};
    for (const obj of state.formItemList) {
      state.formInline[obj.param] = obj.defaultSelect || ""; // 重置时下拉框的默认值如果要保留就选用这个
      // formInlineNew[obj.param] = ""; // 所有筛选条件清空
    }
    emit("search", state.formInline);
    //   state.formInline = formInlineNew;
  };
  defineExpose({
    ...toRefs(state),
    resetForm,
    onSubmit,
  });
  </script>
  
  <style lang="less" scoped>
  .search-box {
    width: 100%;
    height: 68px;
    background: #f1f6ff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 24px;
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }
  </style>
  